<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Tabs</span> <span class="htmlAttributeName">SelectedTab</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>selectedTab</span><span class="quot">&quot;</span> <span class="htmlAttributeName">SelectedTabChanged</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnSelectedTabChanged</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Pills</span> <span class="htmlAttributeName">FullWidth</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Items</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Tab</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">login</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Login<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Tab</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Tab</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">register</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Register<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Tab</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Items</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Content</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TabPanel</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">login</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Card</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CardTitle</span><span class="htmlTagDelimiter">&gt;</span>
                        Welcome Back, Please Login
                    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CardTitle</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Validations</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>loginValidationsRef</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Mode</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ValidationMode</span><span class="enumValue">.Manual</span><span class="quot">&quot;</span> <span class="htmlAttributeName">ValidateOnLoad</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">false</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Validation</span> <span class="htmlAttributeName">Validator</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ValidationRule</span><span class="enumValue">.IsEmail</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>Email<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Text</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>email</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Placeholder</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Enter email...</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Feedback</span><span class="htmlTagDelimiter">&gt;</span>
                                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ValidationNone</span><span class="htmlTagDelimiter">&gt;</span>Please Enter Your Email. <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">ValidationNone</span><span class="htmlTagDelimiter">&gt;</span>
                                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ValidationSuccess</span><span class="htmlTagDelimiter">&gt;</span>Email is good<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">ValidationSuccess</span><span class="htmlTagDelimiter">&gt;</span>
                                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ValidationError</span><span class="htmlTagDelimiter">&gt;</span>Please Enter A Valid Email<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">ValidationError</span><span class="htmlTagDelimiter">&gt;</span>
                                    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Feedback</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">TextEdit</span><span class="htmlTagDelimiter">&gt;</span>
                            <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Validation</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Validation</span> <span class="htmlAttributeName">Validator</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ValidationRule</span><span class="enumValue">.IsNotEmpty</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>Password<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Text</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>password</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Placeholder</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Enter Password..</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
                            <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Validation</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Check</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">bool</span><span class="quot">&quot;</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Checked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>rememberMe</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Remember Me<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Check</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Validations</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnLoginClicked</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Login<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Secondary</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Forgot Password<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
            <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Card</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">TabPanel</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TabPanel</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">register</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Card</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CardTitle</span><span class="htmlTagDelimiter">&gt;</span>
                        New Here? Create An Account
                    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CardTitle</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Validations</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>registerValidationsRef</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Mode</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ValidationMode</span><span class="enumValue">.Manual</span><span class="quot">&quot;</span> <span class="htmlAttributeName">ValidateOnLoad</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">false</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Validation</span> <span class="htmlAttributeName">Validator</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ValidationRule</span><span class="enumValue">.IsNotEmpty</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>Name<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Text</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>name</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Placeholder</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Enter Your Name</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
                            <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Validation</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Validation</span> <span class="htmlAttributeName">Validator</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ValidationRule</span><span class="enumValue">.IsEmail</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>Email<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Text</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>email</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Placeholder</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Enter Your Email</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Feedback</span><span class="htmlTagDelimiter">&gt;</span>
                                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ValidationNone</span><span class="htmlTagDelimiter">&gt;</span>Please Enter your email.<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">ValidationNone</span><span class="htmlTagDelimiter">&gt;</span>
                                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ValidationSuccess</span><span class="htmlTagDelimiter">&gt;</span>Email is valid<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">ValidationSuccess</span><span class="htmlTagDelimiter">&gt;</span>
                                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ValidationError</span><span class="htmlTagDelimiter">&gt;</span>Enter Valid email <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">ValidationError</span><span class="htmlTagDelimiter">&gt;</span>
                                    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Feedback</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">TextEdit</span><span class="htmlTagDelimiter">&gt;</span>
                            <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Validation</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Validation</span> <span class="htmlAttributeName">Validator</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ValidationRule</span><span class="enumValue">.IsNotEmpty</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>Password<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Text</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>password</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Placeholder</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Enter Password</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
                                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldHelp</span><span class="htmlTagDelimiter">&gt;</span>Password Strength: <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Text</span> <span class="htmlAttributeName">TextColor</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">TextColor</span><span class="enumValue">.Danger</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Strong<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Text</span><span class="htmlTagDelimiter">&gt;</span><span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldHelp</span><span class="htmlTagDelimiter">&gt;</span>
                            <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
                        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Validation</span><span class="htmlTagDelimiter">&gt;</span>
                    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Validations</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnRegisterClicked</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
                        Create Account
                    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
                <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">CardBody</span><span class="htmlTagDelimiter">&gt;</span>
            <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Card</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">TabPanel</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Content</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Tabs</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
</div>
